<script setup lang="ts">
import NextChiGroup from '@/components/tiles/next/group/NextChiGroup.vue'
import NextPengGroup from '@/components/tiles/next/group/NextPengGroup.vue'
import NextMingGangGroup from '@/components/tiles/next/group/NextMingGangGroup.vue'
import NextAnGangGroup from '@/components/tiles/next/group/NextAnGangGroup.vue'
import { onMounted, watchEffect, ref } from 'vue'
const props = defineProps({
  // 牌组
  groups: {type: Array, required: false, default: []}
})

let groupsCount = ref(0);

let groupTransformStyleArr = ref(new Array());


function loadStyles() {
  let tempGroups = new Array();
  groupsCount.value = props.groups.length ? props.groups.length : 0;
  for (var i=0; i<groupsCount.value; i++) {
    tempGroups.push(props.groups[i]);
  }
  let tempTranslateX = 0; 
  let tempTranslateY = 0;
  // 先反转, 因为这里元素是flex-end的，所以需要反转计算
  for (var i=0; i<groupsCount.value; i++) {
    if (i == 0) {
      groupTransformStyleArr.value[i] = "translateY(0px)" + " translateX(0px)";
    } else {
      let preGroup = tempGroups[i-1];
      // 判断前一个元素是否是暗杆或者明杠，这个占了4个，所以暗杠与明杠的x-y轴规则特殊处理
      if ((preGroup as any).type == "AN_GANG" || (preGroup as any).type == "MING_GANG") {
        tempTranslateX = tempTranslateX + 37;
        tempTranslateY = tempTranslateY - 150;
      } else {
        tempTranslateX = tempTranslateX + 28;
        tempTranslateY = tempTranslateY - 110;
      }
      groupTransformStyleArr.value[i] = "translateY(" + tempTranslateY+ "px)" + " translateX(" + tempTranslateX +"px)" ;
    }
  }
}

onMounted(() => {
  loadStyles();
})
watchEffect(() => {
  loadStyles();
})
</script>

<template>
  <div class="next-owned-tiles-groups">
    <template v-for="(value, index) in props.groups">
      <template v-if="(value as any).type == 'CHI'">
          <NextChiGroup :tiles="(value as any).tiles" :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': index}"></NextChiGroup>
      </template>
      <template v-else-if="(value as any).type == 'PENG'">
          <NextPengGroup :tile="(value as any).tiles[0]" :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': index}"></NextPengGroup>
      </template>
      <template v-else-if="(value as any).type == 'MING_GANG'">
          <NextMingGangGroup :tile="(value as any).tiles[0]" :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': index}"></NextMingGangGroup>
      </template>
      <template v-else-if="(value as any).type == 'AN_GANG'">
          <NextAnGangGroup :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': index}"></NextAnGangGroup>
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
.next-owned-tiles-groups{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
</style>
